<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title th:text="${stu}"></title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;

        }
        .container{
            margin: auto 0px;
            border: aqua solid 1px;
            float: left;
            height: 300px;
        }
        .clearfix div{
            width: 100%;
            text-align: center;
        }
        .p1{
            height: 110px;
        }

    </style>
</head>
<body id="curdbody">
<p><button class="btn btn-default" type="button" data-toggle="modal" data-target="#myModalt" ><em class="glyphicon glyphicon-align-right"></em>添加</button></p>










<!-- 修改Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form>

                    <div class="form-group">
                        <label for="recipient-name" class="control-label">name</label>
                        <input type="text" class="form-control" id="recipient-name" name="mname">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">内容</label>
                        <textarea class="form-control" id="message-text" name="content"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">时间</label>
                        <input type="date" class="form-control" id="shijian-data" name="data"/>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">分类</label>
                        <select class="form-control" name="mwid" id="mwid">

                        </select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="xiugai">确定提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加Modal -->
<div class="modal fade" id="myModalt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModaltLabel">添加</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form>

                    <div class="form-group">
                        <label for="recipient-name" class="control-label">name</label>
                        <input type="text" class="form-control"  name="mname" id="tjname">
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">内容</label>
                        <textarea class="form-control"  name="content" id="tjtext"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">时间</label>
                        <input type="date" class="form-control"  name="data" id="tjdata"/>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">分类</label>
                        <select class="form-control" name="mwid" id="tjfl">

                        </select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tj">确定提交</button>
            </div>
        </div>
    </div>
</div>



</body>
<script>
    var curPageUrl = window.document.location.href;
    var rootPath = curPageUrl.split("//")[1].split("/")[1];//获取项目名称


    /* 全部查询 */
    jQuery.noConflict();//让渡"$"的使用权，后续只能用jQuery代替$

    topage();/**/
    function topage(){
        jQuery.ajax({
            url:"/"+rootPath+"/all",
            type:"get",
            success:function (allc) {
                jQuery.each(allc,function (i,item) {
                    jQuery("<div class=\"container col-lg-4\" ></div>")
                        .append(
                            jQuery("<div class=\"row clearfix\"></div>")
                                .append(
                                    jQuery("<div></div>").append(jQuery("<h1></h1>").append(item.mname))
                                        .append(jQuery("<p class='p1'></p>").append(item.content))
                                        .append(jQuery("<p></p>").append("时间："+dateFarmat("yyyy-MM-dd",new Date(item.data))+"<br/>"+"分类："+item.classification.fnane))
                                        .append(
                                            jQuery("<div class=\"btn-group\"></div>")
                                                .append(
                                                    jQuery("<button  id='dange' class=\"btn btn-default\" type=\"button\" data-toggle=\"modal\" data-target=\"#myModal\"></button>")
                                                        .append("<em class=\"glyphicon glyphicon-align-right\"></em>")
                                                        .append("修改").attr("danid",item.mid)
                                                )
                                                .append(
                                                    jQuery("<button id='shanchu'  class=\"btn btn-default\" type=\"button\"></button>")
                                                        .append("<em class=\"glyphicon glyphicon-align-justify\"></em>")
                                                        .append("删除").attr("shanid",item.mid)
                                                )
                                        )
                                )
                        ).appendTo("#curdbody");
                })
            }
        });
    }







    /*分类下拉框*/
    xiala();
    function xiala(){
        jQuery.ajax({
            url:"/"+rootPath+"/fenleiqu",
            type:"get",
            success: function (result) {
                jQuery.each(result,function (i,item) {
                    jQuery("<option></option>").append(item.fnane).attr("value",item.wid).appendTo("#myModal select[name=mwid]");
                    jQuery("<option></option>").append(item.fnane).attr("value",item.wid).appendTo("#myModalt select[name=mwid]");
                });
            }
        });
    }



    /*根据id查询单个*/
    /*进行动态绑定点击事件*/
    jQuery(document).on("click","#dange",function () {
        var danid= jQuery(this).attr("danid")
        jQuery.ajax({
            url:"/"+rootPath+"/dan/"+danid,
            type:"get",
            dataType:"json",
            success:function (result) {
                jQuery("#recipient-name").val(result.mname);
                jQuery("#message-text").text(result.content);
                jQuery("#shijian-data").val(dateFarmat("yyyy-MM-dd",new Date(result.data)));
                jQuery("#myModal select[name=mwid]").val(result.mwid);
                jQuery("#xiugai").attr("banid",result.mid);
            }
        })
    });


    /*修改*/
    jQuery(document).on("click","#xiugai",function () {
        var banid= jQuery(this).attr("banid");
        var recipient=jQuery("#recipient-name").val();
        var message=jQuery("#message-text ").val();
        var shijian=jQuery("#shijian-data").val();
        var mwid=jQuery("#mwid").val();
        var data={
            "mid": banid,
            "mname": recipient,
            "data": shijian,
            "mwid": mwid,
            "content": message
        };
        jQuery.ajax({
            url:"/"+rootPath+"/xiugai/"+banid,
            contentType: "application/json; charset=utf-8",
            type:"put",
            dataType:"json",
            data:JSON.stringify(data),
            success:function (result) {
                jQuery("#curdbody .container").remove();
                jQuery("#myModal").modal("hide");
                topage();
            }
        })
    });

    /*添加*/
    jQuery("#tj").click(function () {
        var tjname=jQuery("#tjname").val();
        var tjtext=jQuery("#tjtext").val();
        var tjdata=jQuery("#tjdata").val();
        var tjfl=jQuery("#tjfl").val();
        var data={
            "mname": tjname,
            "data": tjdata,
            "mwid": tjfl,
            "content": tjtext
        };
        jQuery.ajax({
            url:"/"+rootPath+"/zenjia",
            type:"post",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify(data),
            success:function (result) {
                jQuery("#curdbody .container").remove();
                jQuery("#myModalt").modal("hide");
                topage();
            }
        })
    });


    /*删除*/
    jQuery(document).on("click","#shanchu",function () {
        var sid=jQuery(this).attr("shanid")
        jQuery.ajax({
            url:"/"+rootPath+"/shan/"+sid,
            type:"delete",
            success:function (result) {
                jQuery("#curdbody .container").remove();
                topage();
            }
        })
    });








    //日期格式化操作
    //dateFarmat("yyyy-MM-dd hh:mm:ss",new Date(item.piStartdate))
    function dateFarmat(fmt,date)
    {
        var o = {
            "M+" : date.getMonth()+1,                 //月份
            "d+" : date.getDate(),                    //日
            "h+" : date.getHours(),                   //小时
            "m+" : date.getMinutes(),                 //分
            "s+" : date.getSeconds(),                 //秒
            "q+" : Math.floor((date.getMonth()+3)/3), //季度
            "S"  : date.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }

</script>

</html>
